<script setup>
import { constant } from 'lodash'
import { reactive } from 'vue-demi'

const { proxy } = getCurrentInstance()
const ruleFormRef = ref(null)
const newRef = ref(null)
const props = defineProps({})

// 新增表单 字段
const addForm = reactive({
  programmeCode: '', //方案代码
  b: '',
  programmeName: '', //方案名称
  programmeView: '', //方案描述
  defaultFlag: '2', //默认标志
  idList: '', //策略信息id
  strategyMessageList: [
    {
      id: '', //id(序号)
      strategyCode: '', //策略代码
      strategyDeliver: '', //发货策略
      enable: '0', //是否启用
      strategyView: '' //策略描述
    }
  ]
})

// 新增表单 校验规则
const addrules = reactive({
  a: [{ required: true, message: '请输入', trigger: 'blur' }]
})
// 回显数据赋值
watchEffect(() => {
  if (typeof props.ruleForm == 'object' && props.ruleForm?.id) {
    for (let Key in props.ruleForm) {
      addForm[Key] = props.ruleForm[Key]
    }
  }
})

// 提交数据
const submit = () => {
  return new Promise((resolve, reject) => {
    newRef.value.validate(valid => {
      if (!valid) {
        proxy.warningMsg('请填写完整')
        resolve(false)
      } else {
        resolve(addForm)
      }
    })
  })
}
defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <!--  表单 -->
    <el-form
      :model="addForm"
      label-width="120px"
      class="demo-ruleForm"
      :rules="addrules"
      status-icon
      inline
      ref="newRef"
    >
      <el-form-item label="备件入库单号">
        <el-input v-model="addForm.programmeCode" disabled />
      </el-form-item>
      <el-form-item label="备件编码">
        <el-input v-model="addForm.programmeCode" disabled />
      </el-form-item>
      <el-form-item label="供应商">
        <el-input v-model="addForm.programmeCode" disabled />
      </el-form-item>
      <el-form-item label="备件名称">
        <el-input v-model="addForm.programmeCode" disabled />
      </el-form-item>
      <el-form-item label="备件规格">
        <el-input v-model="addForm.programmeCode" disabled />
      </el-form-item>
      <el-form-item label="备件单位">
        <el-input v-model="addForm.programmeCode" disabled />
      </el-form-item>
      <el-form-item label="包装内数量" prop="a">
        <el-input v-model="addForm.programmeCode" />
      </el-form-item>
      <el-form-item label="入库数量" prop="a">
        <el-input v-model="addForm.programmeCode" />
      </el-form-item>
      <el-form-item label="入库总数量">
        <el-input v-model="addForm.programmeCode" disabled />
      </el-form-item>
      <el-form-item label="生产日期" prop="a">
        <el-date-picker
          value-format="YYYY-MM-DD"
          v-model="addForm.warehouseTypeDict"
          arrow-control
          placeholder="年/月/日"
        />
      </el-form-item>
      <el-form-item label="批次号">
        <el-input v-model="addForm.programmeCode" disabled />
      </el-form-item>
      <el-form-item label="外包装单位" prop="a">
        <el-select v-model="value" class="m-2" placeholder="请选择">
          <el-option v-for="item in picking_purchase_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="标签模版" prop="a">
        <el-select v-model="value" class="m-2" placeholder="请选择">
          <el-option v-for="item in picking_purchase_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <div class="flex-items-center textareaClass">
        <label>备注</label>
        <el-input
          class="inputmargin"
          type="textarea"
          v-model="addForm.b"
          :input-style="{
            width: '100%'
          }"
        />
      </div>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.title {
  color: #3985fb;
}
label {
  display: inline-block;
  width: 120px;
  text-align: right;
  padding-right: 12px;
}
.app-container ::v-deep .el-input__inner {
  width: 168px !important;
}

.app-container ::v-deep .el-form-item__content {
  width: 168px !important;
}
</style>
